<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>用户登录</title>
		<link rel="stylesheet" href="./main/css/font-awesome.css" />
		<link rel="stylesheet" href="./main/css/index.css" />
		<script src="./main/jquery.js"></script>
	</head>
	<body>
		<div class="navbar">
			<input type="checkbox" id="checkbox" onclick="YC()"/>
			<!-- 复选框的id属性值和label元素的for属性值必须是相同的,才能够通过点击label选中复选框 -->
			<label for="checkbox" >
				<img src="./main/images/展开侧边栏.png" alt="">
			</label>
			<ul>
				<li>
					<img src="images/用户 (1).png" alt="" />
					<span></span>
					<marquee>你好! 欢迎登陆!</marquee>
				</li>
				<li>
					<a href="./主页/index.html" target="IFRAME">
						<img src="./main/images/首页.png" alt="">
						<span>首页</span>
					</a>
				</li>
				<li>
					<a href="./list/index.html"  target="IFRAME">
						<img src="./main/images/功能列表-01.png" alt="">
						<span>功能列表</span>
					</a>
				</li>
				<li>
					<a href="./个人信息/index.html" target="IFRAME">
						<img src="./main/images/用户信息.png" alt="">
						<span>用户信息</span>
					</a>
				</li>
				<li>
					<a href="./save/index.html" target="IFRAME">
						<img src="./main/images/账户安全.png" alt="">
						<span>账户安全</span>
					</a>
				</li>
			</ul>
		</div>
		<iframe  src="./主页/index.html" id="IF" name="IFRAME"></iframe>
	</body>
	<script>

		// 导航栏切换时改变iframe层级······
		var a=0
		function YC() {
			if(a==0){
				$('iframe').css('z-index',-1);
				$('body > div > label > img').attr('src', './main/images/收起侧边栏.png');
				a=1
			}else if(a==1){
				setTimeout(function() {
					$('iframe').css('z-index',1);
					
				}, 500);
				$('body > div > label > img').attr('src', './main/images/展开侧边栏.png');
				a=0
			}			
		}



	</script>
</html>
